<template>
  <div>
  		<div class="main-body">
  			<h3 class="main-body__title text-left">
  				资金流动
  			</h3>
  			<div class="main-body__content">
  				<div class="order-select text-left">
  					<div class="row">
  						<div class="col-md-6">
  							<div class="order-select__item order-select__time">
	  							<p class="order-select__title">日期</p>
	  							<div class="row">
	  								<div class="col-sm-6">
                      <datepicker placetext="请选择起始时间" v-model="start_time"></datepicker>
	  								</div>
	  								<div class="col-sm-6">
                      <datepicker placetext="请选择结束时间" v-model="end_time"></datepicker>
	  								</div>
	  							</div>
	  						</div>
  						</div>
  						<div class="col-md-3">
  							<div class="order-select__item order-select__time">
  								<p class="order-select__title">选择支付通道</p>
	  							<div class="form">
                    <select2 :options="payTypeOptions" v-model="payType">
                        <option disabled value="0">支付通道</option>
                    </select2>
	  							</div>
  							</div>
  						</div>
  					</div>
  				</div>
  				<div class="capital-show">
  					<table class="text-left table table-bordered">
  						<thead>
  							<tr>
  								<th>日期</th>
  								<th>通道</th>
  								<th>总交易笔数</th>
  								<th>成功交易笔数</th>
  								<th>转化率</th>
  								<th>交易金额（元）</th>
  								<th>手续费（元）</th>
  								<th>实际到账（元）</th>
  								<th>累计交易额（元）</th>
  								<th>累计到账（元）</th>
  								<th>操作</th>
  							</tr>
  						</thead>
  						<tbody>
  							<tr>
  								<td>2014-10-10</td>
  								<td>全部</td>
  								<td>1111000</td>
  								<td>11000</td>
  								<td>50%</td>
  								<td>100000000</td>
  								<td>100000000</td>
  								<td>100000000</td>
  								<td>100000000</td>
  								<td>100000000</td>
  								<td>
                      <a data-toggle="modal" data-target="#order-modal">查看</a>        
                  </td>
  							</tr>
  						</tbody>
  					</table>
  					<page></page>
  				</div>
  			</div>
  		</div>
      <orderModal></orderModal>

  </div>
</template>
<script>

	import page from './page'
  import select2 from './select2'
  import datepicker from './datepicker'
  import orderModal from './order-modal'

  export default {
    name:'capital',
    data(){
      return {
        start_time:'',
        end_time:'',
        payType:0,
        payTypeOptions:[
          {id:1,text:'支付宝'},
          {id:2,text:'微信'}
        ]
      }
    },
    components:{
    	page,
      select2,
      datepicker,
      orderModal
    }
  }
</script>
<style scoped lang="less">
  	@import '../../assets/style/color';

  	.capital-show{
  		height: 553px;
		position: relative;
    // @media screen and (max-width:)
    .table > tbody > tr > th{

    }
		.table > tbody > tr > td{
			&:last-child{
				color:@cl_2b98f0;
			}
		}
  	}
</style>